<template>
  <div class="app-container">
    <!--查询条件-->
    <el-form :inline="true" :model="searchObj" class="demo-form-inline">
      <el-form-item label="医院名称">
        <el-input @clear="getHospitalSetList"
                  clearable
                  placeholder="医院名称"
                  v-model="searchObj.hosname"
        ></el-input>
      </el-form-item>
      <el-form-item label="医院编号">
        <el-input @clear="getHospitalSetList"
                  clearable
                  placeholder="医院编号"
                  v-model="searchObj.hoscode"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getHospitalSetList" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <!--批量删除按钮-->
    <div>
      <el-button :disabled="disabled" @click="romverRows()" size="mini" type="danger">批量删除</el-button>
    </div>
    <!--表数据-->
    <el-table
      :data="list"
      @selection-change="handleSelectionChange"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="45">
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        label="医院名称"
        prop="hosname"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="医院编号"
        prop="hoscode"
        sortable
      >
      </el-table-column>
      <el-table-column
        label="api基本路基"
        prop="apiUrl"
      >
      </el-table-column>
      <el-table-column
        label="联系人姓名"
        prop="contactsName"
      >
      </el-table-column>
      <el-table-column
        label="联系人手机号码"
        prop="contactsPhone"
      >
      </el-table-column>
      <el-table-column
        align="left"
        label="状态"
        width="100"
      >
        <template slot-scope="scope">
          <span style="color: blue" v-if="scope.row.status === 1">可用</span>
          <span style="color: orange" v-else>不可用</span>
        </template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        prop="createTime"
        sortable
      >
      </el-table-column>

      <el-table-column
        :default-sort="{prop: 'updateTime', order: 'ascending'}"
        label="更新时间"
        prop="updateTime"
        sortable
      >
      </el-table-column>


      <el-table-column
        fixed="right"
        label="操作"
        width="210"
      >
        <template slot-scope="scope">
          <el-button @click="handleDelete(scope.row)"
                     size="mini"
                     style="color: red"
                     type="text"
          >删除
          </el-button>

          <el-button @click="lockHospSet(scope.row.id,0)"
                     size="mini"
                     style="color: blue;width: 100px"
                     type="text"
                     v-if="scope.row.status===1"
          >锁定
          </el-button>

          <el-button @click="lockHospSet(scope.row.id,1)"
                     size="mini"
                     style="color: orange;width: 100px"
                     type="text"
                     v-else
          >取消锁定
          </el-button>

          <router-link :to="'/hosp/edit/'+scope.row.id">
            <el-button size="mini" type="text">编辑</el-button>
          </router-link>


        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      :current-page="current"
      :page-size="size"
      :page-sizes="[5, 10, 20, 40]"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      style="padding-top: 10px"
    >
    </el-pagination>

  </div>
</template>

<script>
  import hospital from "../../api/hospital";

  export default {
    name: "list",
    //import引入的组件需要注入到对象中才能使用",
    components: {},
    data() {
      //这里存放数据",
      return {
        current: 1,//当前页
        size: 5,//每页显示记录数
        searchObj: {},//条件封装对象
        list: [],//每页数据集合
        total: 0,//总记录数
        disabled: true,//禁用按钮 默认是true
        multipleSelection: [], // 批量选择中选择的记录列表
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
    created() {
      this.getHospitalSetList();
    },
    //方法集合",
    methods: {

      /*
      * 修改医院设置锁定或解锁
      * */
      lockHospSet(id, status) {
        hospital.lockHospitalSet(id, status)
          .then(response => {
            this.getHospitalSetList();
          })
      },

      /*
      * 批量删除医院设置
      * */
      romverRows() {
        this.$confirm('此操作将永久医院设置信息,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let idList = [];

            //遍历数组得到每个Id值，放到idList数组中
            for (let i = 0; i < this.multipleSelection.length; i++) {
              let obj = this.multipleSelection[i];
              let id = obj.id;
              idList.push(id)
            }

            hospital.batchRemoveHospitalSet(idList)
              .then(response => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getHospitalSetList();
              })
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //多选框
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.disabled = false;
        console.log(val)
      },
      /*
      * 根据医院Id进行逻辑删除
      * */
      handleDelete(row) {
        this.$confirm('此操作将永久【' + row.hosname + '】,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          hospital.removeHospitalById(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getHospitalSetList();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },


      //分页
      handleCurrentChange(val) {
        this.current = val;
        this.getHospitalSetList();
        console.log(`当前页: ${val}`);
      }
      ,
      handleSizeChange(val) {
        this.size = val;
        this.getHospitalSetList();
        console.log(`每页 ${val} 条`);
      }
      ,
      /**
       * 条件查询加分页
       */
      getHospitalSetList() {
        hospital.findAllHospitalSet(this.current, this.size, this.searchObj)
          .then(response => {//请求成功response是接口返回数据
            this.list = response.data.records;
            this.total = response.data.total
          })
          .catch(error => {//请求失败
            console.log(error)
          })
      },

    }
    ,
//监听属性 类似于data概念",
    computed: {}
    ,
//监控data中的数据变化",
    watch: {}
    ,
//生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
    beforeCreate() {
    }
    ,
//生命周期 - 挂载之前",html模板未渲染
    beforeMount() {

    }
    ,
//生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
    mounted() {

    }
    ,

//生命周期 - 更新之前",数据模型已更新,html模板未更新
    beforeUpdate() {

    }
    ,
//生命周期 - 更新之后",数据模型已更新,html模板已更新
    updated() {

    }
    ,
//生命周期 - 销毁之前",
    beforeDestroy() {

    }
    ,
    destroyed() {

    }
    ,
//生命周期 - 销毁完成",
//如果页面有keep-alive缓存功能，这个函数会触发",
    activated() {

    }
  }
</script>

<style scoped>
</style>
